<template>
	<view>
		<view class="box_code">
			<view
				class="cardStyle"
				:style="`background-image: url(` + cardData.cardPicUrl + `)`"
			>
				<u-image
					class="member-photo"
					width="72rpx"
					height="72rpx"
					border-radius="72rpx"
					:src="cardData.logoUrl"
				></u-image>
				<view class="member-title">
					<view class="member-title-1">
						{{ cardData.storeName }}会员卡
					</view>
					<view class="member-title-2">{{ cardData.cardDesc }}</view>
				</view>
				<u-image
					v-if="cardData.isMember !== 0"
					width="48rpx"
					height="48rpx"
					class="qrcode-img"
					src="http://img.druglots.cn/image/QRcode.png"
					@click="cardcodeClick('/pages/user/cardbag/cardcode?domainPrefix=' + domainPrefix || '')"
				></u-image>
			</view>

			<view v-if="cardData.isMember === 0">
				<view class="rightsheight">
					<u-image
						width="32rpx"
						height="32rpx"
						style="display: inline-block;"
						src="http://img.druglots.cn/image/Rights.png"
					></u-image>
					<text class="rights-text">激活立享以下会员特权:</text>
				</view>
				<view class="rightsheight end">
					<u-image
						width="22rpx"
						height="22rpx"
						style="display: inline-block;"
						src="http://img.druglots.cn/image/checkmark.png"
					></u-image>
					<text class="checkmart-text">
						新会员首次下单立减{{ cardData.amountD }}元
					</text>
				</view>

				<u-button
					class="placeorder"
					:disabled="!checked"
					@click="activation()"
				>
					激活会员卡
				</u-button>
				<u-modal
					v-model="isopen"
					:show-confirm-button="false"
					:show-title="false"
				>
					<view class="slot-content">
						<view class="modal-padding">
							<view class="modal-icon">
								<u-image
									class="icon"
									width="72"
									height="72"
									src="http://img.druglots.cn/image/success.png"
								/>
							</view>
							<view class="content">激活成功</view>
							<view class="content">
								{{ countdown }} 秒后返回店铺首页
							</view>
						</view>
					</view>
				</u-modal>

				<view class="checkedstyle">
					<view class="checkbox">
						<u-checkbox
							@change="goodsItemChange"
							v-model="checked"
							:size="32"
						></u-checkbox>
					</view>
					<text class="agreement">
						同意
						<text class="agre">《会员授权协议》</text>
					</text>
				</view>
			</view>
			<view v-if="cardData.isMember !== 0">
				<view class="code_text">
					<view class="code code_text1">
						<view class="name">积分</view>
						<view class="noclickfen">
							{{ cardData.remainIntegral }}
						</view>
					</view>
					<view class="code code_text2" @click="couponClick('/pages/user/cardbag/coupon?storeId=' + cardData.storeId || '')">
						<view class="name">优惠券</view>
						<view class="fen">{{ cardData.validCoupons }}</view>
					</view>
					<view class="code code_text3" @click="couponClick('/pages/user/cardbag/mall?storeId=' + cardData.storeId || '')">
						<view class="name">积分商城</view>
						<view class="fen">去查看</view>
					</view>
				</view>

				<u-button class="placeorder" plain type="error">
					下单享优惠
				</u-button>
			</view>
			<u-cell-group style="margin-top: 68rpx;">
				<u-cell-item title="会员详情" @click="tocardDetail('/pages/user/cardbag/cardetail?domainPrefix=' + domainPrefix || '')"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
import { getdetail, getactivestatus } from '@/api/http/card.js'

export default {
	components: {},
	data() {
		return {
			cardData: [],
			domainPrefix: '',
			checked: false,
			isopen: false,
			countdown: 3
		}
	},
	// 取路由参数
	onLoad(opt) {
		this.domainPrefix = opt.domainPrefix
	},
	created() {
		this.getStorememberinformation()
	},
	methods: {
		// 获取店铺会员卡信息
		getStorememberinformation() {
			getdetail({ domainPrefix: this.domainPrefix }).then(res => {
				if (res.code === 200) {
					this.cardData = res.data
				} else {
					uni.showToast({
						title: res.message,
						icon: 'warning'
					})
				}
			})
		},
		// 勾选change事件
		goodsItemChange(e) {
			this.checked = e.value
		},
		// 激活会员卡
		activation() {
			if (this.checked) {
				getactivestatus({
					domainPrefix: this.domainPrefix // cfg.domainPrefix
				}).then(res => {
					if (res.code === 200) {
						this.isopen = true
						this.timer = setInterval(() => {
							if (this.countdown > 0) {
								this.countdown = this.countdown - 1
							} else {
								this.isopen = false
							}
						}, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			} else {
				uni.showToast({
					title: '请勾选会员授权协议',
					icon: 'none'
				})
			}
		},
		tocardDetail(url) {
			uni.navigateTo({
				url
			})  
		},
		couponClick(url) {
			uni.navigateTo({
				url
			})  
		},
		cardcodeClick(url) {
			uni.navigateTo({
				url
			})
		}
	},
	Destroy() {
		clearInterval(this.timer)
	},
}
</script>

<style lang="scss" scoped>
.box_code {
	padding: 58rpx 58rpx 0 58rpx;
	overflow: hidden;

	.cardStyle {
		width: 634rpx;
		height: 380rpx;
		background-size: 100% 100%;
		border-radius: 22rpx;
		display: flex;
		justify-content: space-around;

		.member-photo {
			flex-shrink: 0;
			margin: 33rpx 19rpx 0 33rpx;
			// background: rgba(172, 172, 172, 1);
			border: 1rpx solid rgba(251, 253, 251, 1);
		}

		.member-title {
			font-family: 'PingFang SC';
			font-weight: 500;
			margin-top: 30rpx;
			color: rgba(255, 255, 255, 1);

			.member-title-1 {
				font-size: 30rpx;
			}

			.member-title-2 {
				width: 420rpx;
				height: 35rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 24rpx;
			}
		}

		.qrcode-img {
			margin-top: 47rpx;
			margin-right: 45rpx;
		}
	}

	.code_text {
		display: flex;
		justify-content: space-around;
		font-family: PingFang SC;
		font-weight: 500;
		margin-top: 43rpx;

		.code {
			width: 211rpx;
			height: 88rpx;
			text-align: center;
		}

		.code_text1 {
			border-right: 1rpx solid rgba(234, 234, 234, 1);
		}

		.code_text2 {
			border-right: 1rpx solid rgba(234, 234, 234, 1);
		}

		.name {
			font-size: 24rpx;
			color: rgba(86, 86, 86, 1);
		}

		.fen {
			font-size: 34rpx;
			font-family: 'PingFang SC';
			font-weight: 500;
			color: rgba(254, 98, 76, 1);
		}

		.noclickfen {
			font-size: 34rpx;
			font-family: 'PingFang SC';
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}
	}

	.placeorder {
		width: 326rpx;
		height: 64rpx;
		color: #fd614c;
		line-height: 64rpx;
		margin-top: 70rpx;
	}
}
.rightsheight {
	height: 40rpx;
	margin-top: 26rpx;
	padding: 0 21rpx;

	&.end {
		margin-top: 17rpx;
	}
}

.checkmart-text {
	display: inline-block;
	font-size: 28rpx;
	padding-left: 6rpx;
	font-family: 'PingFang SC';
	font-weight: 500;
	color: rgba(254, 98, 76, 1);
}
.rights-text {
	font-size: 26rpx;
	padding-left: 6rpx;
	font-family: 'PingFang SC';
	font-weight: 500;
	color: rgba(86, 86, 86, 1);
	display: inline-block;
}

.checkedstyle {
	margin: 36rpx auto 85rpx auto;
	text-align: center;
}

.agreement {
	font-size: 28rpx;
	font-family: 'PingFang SC';
	text-align: center;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);

	.agre {
		color: #b2762e;
	}
}

.checkbox {
	display: flex;
	align-items: center;
	display: inline-block;
}

.modal-padding {
	padding-top: 48rpx;
	height: 300rpx;

	.modal-icon {
		text-align: center;
		margin-bottom: 31rpx;

		.icon {
			display: inline-block;
		}
	}

	.content {
		color: #000000;
		font-size: 34rpx;
		text-align: center;
	}
}

/deep/ .u-checkbox__label {
	margin-right: 0;
}
</style>
